﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/frame.css" />
<link rel="stylesheet" type="text/css" href="css/desk.css" />
<style type="text/css">

body{
	padding:20px;
}
.even{
	background:#eee;
}
.odd{
	background:#f2f399;
}
.optionsBox{
    height: 50px;
    line-height: 50px;
    background: #ccc;
    margin-bottom:20px;
    padding-left: 20px;
}
.button-bigBlue{
    padding: 5px 20px;
    height: auto;
    background: none repeat scroll 0% 0% #2492EE;
    color: #FFF;
    border: medium none;
    cursor: pointer;
    border-radius: 3px; 
}
</style>

</head>
<body>
    <div class="optionsBox">
        <button id="btn_reLoad" class="button-bigBlue">重新加载(自定义处理)</button>
        <button id="btn_insert" class="button-bigBlue">插入数据</button>
        <button id="btn_append" class="button-bigBlue">追加数据</button>
        <button id="btn_data" class="button-bigBlue">数据驱动</button>
    </div>

    <div class="desk">
        <div class="app-create fl">
            <div class="app-create-hline"></div>
            <div class="app-create-vline"></div>
            <div class="app-create-text">新增基础服务</div>
        </div>
	    <!--模板 begin-->  
	    <div class="app-myapp fl ${bgcolor}" title="${title}">
	        <div class="app-myapp-shared">{{numbers.app.count}}</div>
	        <div class="app-myapp-photo icons"></div>
	        <div class="app-myapp-caption">{{title}}</div>
	        <div class="app-myapp-op">
	            <a target="_blank" href="http://${url}">{{url}}</a>
	        </div>
	    </div>
	    <!--模板 end-->  
        <h1 style="float:left;width:100px;height:100px;">this is H1</h1>
    </div>

</body>
</html>

<script src="js/jquery.js"></script>
<script src="js/template.js"></script>
<script>
/*数据*/
data = [
        {
            title:"我的应用1",
            url:"www.cnblogs.com/wsoft",
            numbers:
            {
                app:{count:"100"}
            }
        },
        {
            title:"我的应用1",
            url:"www.cnblogs.com/wsoft",
            numbers:
            {
                app:{count:"100"}
            }
        },
        {
            title:"我的应用1",
            url:"www.cnblogs.com/wsoft",
            numbers:
            {
                app:{count:"100"}
            }
        }
        ];



wTemplate.repeat({
    repeatElement : $(".app-myapp")[0],
    data : data,
    count : 3,
    onloadBefore : function(){
        console.log("load before");
    },
    onload : function(){
        console.log("loaded");
    }
});


/*单击按钮载入数据*/
$("#btn_reLoad").click(function(){
	wTemplate.repeat({
		type : "cover",
		repeatElement:$(".app-myapp")[0],
		data:data,
		render:function(object){ /*自定义处理过程*/
			/*
			object.index=每个的索引
			object.item=data数组里的每一行
			功能： 元素 <div class="app-myapp fl ${bgcolor}"> 中的 ${bgcolor}被替换为 odd 或 even
			*/
            console.log(object.item);
			return  {
	                    "bgcolor": object.index%2==0?"odd":"even" ,
	                    "title"  : "<i>"+object.item.title+"</i>" ,
	                    "numbers.app.count" : object.item.numbers.app.count + "kg"
	                };
			/*
	        return {...}可以自定义页面的字段值
	        bgcolor,title,numbers.app.count就是页面上的${bgcolor},${title},${numbers.app.count}
	        */
		}
	});  /*end template*/
});

/*单击按钮插入数据*/
$("#btn_insert").click(function(){
    wTemplate.repeat({
    	type : "insert",
        repeatElement:$(".app-myapp")[0],
        data:data,
    });
});

/*单击按钮追加数据*/
$("#btn_append").click(function(){
    wTemplate.repeat({
    	type : "append",
        repeatElement:$(".app-myapp")[0],
        data:data,
    });
});

$("#btn_data").on("click",function(){
    data[2].title = "qqwewrw";
    data[2].url = "myurl";
    data[2].numbers.app.count = 90;
    console.log(data[0]);
});
</script>

